<template>
  <el-dialog title="申请器械类别" v-model="visible" width="780px" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="changeCate">
      <Cate class="applyCate" :isCate="isCate" :cateList="changeCateInfo.catIdList" />

      <div class="qualica">
        <p class="title">资质证件</p>

        <ul class="qualica-list">
          <li v-for="qualica in changeQualication" :key="qualica.customerQualificationId">
            <el-image class="qualica-img" :src="qualica.qualificationImg" :preview-src-list="[qualica.qualificationImg]"> </el-image>
            <p>{{ consts.qualificationType.find((e) => e.qualificationType === qualica.qualificationType).title }}</p>
            <p>{{ qualica.effectiveDate }} - {{ qualica.expiredDate }}</p>
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import { ElMessage } from 'element-plus'
import Button from '@/components/button/button.vue'
import Cate from '../edit.vue'

const props = defineProps(['visible', 'changeCateInfo'])
const emit = defineEmits(['update:visible'])

const isCate = ref(true)

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})
</script>

<style scoped lang="scss">
.changeCate {
  padding: 0 20px 30px 20px;

  .qualica {
    margin-top: 40px;

    .title {
      font-size: 16px;
      font-weight: 500;
    }

    .qualica-list {
      padding: 20px 0 30px 40px;
      display: flex;
      justify-content: space-around;

      li {
        display: flex;
        align-items: center;
        flex-direction: column;
        cursor: pointer;

        .qualica-img {
          width: 100px;
          height: 100px;
        }

        p {
          color: #606266;
          line-height: 20px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
